<template>
  <div class="questions-container">
    <el-card class="box-card">
      <div class="btn_wrapper">
        <span style="font-size: 12px; color: pink"
          >说明：目前支持学科和关键字条件筛选</span
        >
        <el-button
          style="float: right"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- 搜索条件筛选区-->
      <el-form label-width="80px" ref="ruleForm">
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="学科">
                <el-select
                  v-model="requestParams.subjectID"
                  @change="changeSubject"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in subjectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="二级目录">
                <el-select
                  v-model="requestParams.catalogID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in directoryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签">
                <el-select
                  v-model="requestParams.tags"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in tagOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="关键字">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.keyword"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="试题类型">
                <el-select
                  v-model="requestParams.questionType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in questionTypeOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="难度">
                <el-select
                  v-model="requestParams.difficulty"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in difficultyOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="方向">
                <el-select
                  v-model="requestParams.direction"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in directionOptions"
                    :key="item.index"
                    :value="item.value"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="录入人">
                <el-select
                  v-model="requestParams.creatorID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in userlist"
                    :key="item.id"
                    :value="item.id"
                    :label="item.username"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="题目备注">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.remarks"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="企业简称">
                <el-input
                  style="width: 100%"
                  v-model="requestParams.shortName"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="城市">
                <el-select
                  placeholder="请选择"
                  @change="handleCity"
                  v-model="requestParams.province"
                  style="width: 48%; margin-right: 2%"
                >
                  <el-option
                    v-for="item in cityOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>

                <el-select
                  placeholder="请选择"
                  v-model="requestParams.city"
                  style="width: 50%"
                >
                  <el-option
                    v-for="item in areaOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple" style="text-align: right">
              <el-button @click="clear()">清除</el-button>
              <el-button @click="filter()" type="primary">搜索</el-button>
            </div></el-col
          >
        </el-row>
      </el-form>
      <!-- 消息提示框 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 数据表格区 -->
      <el-table :data="list">
        <el-table-column prop="number" label="试题编号" width="140">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
          <template slot-scope="scope">{{
            scope.row.questionType === "1"
              ? "单选"
              : scope.row.questionType === "2"
              ? "多选"
              : "简单"
          }}</template>
          <!-- <template v-else-if="questionType === 2">{{ 多选 }}</template>
          <template v-else>{{ 简单 }}</template> -->
        </el-table-column>
        <el-table-column label="题干" width="240">
          <template slot-scope="scope"
            ><span v-html="scope.row.question"></span
          ></template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="140">
          <template slot-scope="scope">
            {{ scope.row.addDate | dateFormat }}</template
          >
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="118">
          <template slot-scope="scope">{{
            scope.row.difficulty === "1"
              ? "简单"
              : scope.row.questionType === "2"
              ? "一般"
              : "困难"
          }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-button
              type="primary"
              size="small"
              plain
              icon="el-icon-view"
              @click="openPreviewDialog(scope.row)"
              circle
            ></el-button>
            <!-- 修改 -->
            <el-button
              type="success"
              size="small"
              plain
              icon="el-icon-edit"
              @click="$router.push(`new?id=${scope.row.id}`)"
              circle
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              size="small"
              plain
              icon="el-icon-delete"
              @click="deleteQuestion(scope.row)"
              circle
            ></el-button>
            <!-- 加入精选 -->
            <el-button
              type="warning"
              size="small"
              plain
              icon="el-icon-check"
              @click="addChoice(scope.row)"
              circle
            ></el-button
          ></template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParams.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="requestParams.pagesize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 弹出对话框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 预览 -->
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from "@/api/hmmm/questions";
import { simple as subjectList } from "@/api/hmmm/subjects";
import { simple as userList } from "@/api/base/users";
import { simple as directoryList } from "@/api/hmmm/directorys";
import { simple as tagList } from "@/api/hmmm/tags";
import { questionType, difficulty, direction } from "@/api/hmmm/constants";
import { provinces as getCity, citys as getArea } from "@/api/hmmm/citys";
import QuestionsPreview from "../components/questions-preview";
export default {
  name: "Questions",
  components: {
    QuestionsPreview,
  },
  props: {},
  data() {
    return {
      questionInfo: {},
      dialogVisible: false, // 弹出对话框
      questionType,
      direction,
      difficulty, //响应式数据需要先声明
      list: [], //基础题库列表
      subjectOptions: [], // 学科简单列表
      userlist: [], //用户/录入人列表
      directoryOptions: [], // 二级目录
      tagOptions: [], //标签列表
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
      },
      questionTypeOptions: questionType, //试题类型
      difficultyOptions: difficulty, //难度
      directionOptions: direction, //方向
      cityOptions: getCity(), // 城市
      areaOptions: [], // 地区 当选择了城市的时候赋值
      total: 0,
    };
  },
  created() {
    this.getQuestionsList();
    this.getUserList();
    this.getSubjectOptions();
  },
  methods: {
    //获取列表数据
    async getQuestionsList() {
      const { data } = await list(this.requestParams);
      console.log(data);
      this.list = data.items;
      this.total = data.counts;
    },

    // 获取录入人列表
    async getUserList() {
      const { data } = await userList();
      // console.log(data);
      this.userlist = data;
    },
    // 获取学科列表
    async getSubjectOptions() {
      const { data } = await subjectList();
      // console.log(data);
      this.subjectOptions = data;
    },
    // 分页处理每页条数
    handleSizeChange(val) {
      // console.log(val);
      this.requestParams.pagesize = val;
      // console.log(this.pagesize);
      this.getQuestionsList();
    },
    // 分页处理当前页
    handleCurrentChange(val) {
      this.requestParams.page = val;
      this.getQuestionsList();
    },

    // 获取二级目录
    async changeSubject(subjectID) {
      this.requestParams.catalogID = null;
      this.requestParams.tags = null;
      if (subjectID) {
        // 获取目录
        // 一个方法里发送两个请求时需要给data设置别名
        const { data: directoryArr } = await directoryList({ subjectID });
        this.directoryOptions = directoryArr;
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID });
        console.log(tagArr);
        this.tagOptions = tagArr;
      } else {
        this.directoryOptions = [];
        this.tagOptions = [];
      }
    },

    // 删除操作
    async deleteQuestion(question) {
      await this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await remove(question);
      this.$message.success("删除成功");
      this.getQuestionsList();
    },

    // 加入精选
    async addChoice(question) {
      await this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      });
      await choiceAdd({ id: question.id, choiceState: 1 });
      this.$message.success("加入精选成功");
      this.getQuestionsList();
    },

    // 城市下拉框处理
    handleCity(cityName) {
      // 地区选中的数据清空
      this.requestParams.city = null;
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName);
    },

    // 清除操作
    clear() {
      for (const k in this.requestParams) {
        if (k !== "page" && k !== "pagesize") {
          this.requestParams[k] = null;
        }
      }
    },
    // 搜索操作
    filter() {
      this.requestParams.page = 1;
      this.getQuestionsList();
    },
    // 预览操作
    openPreviewDialog(questionInfo) {
      this.questionInfo = questionInfo;
      this.$nextTick(() => {
        this.$refs.questionPreview.open();
      });
    },
  },
};
</script>

<style scoped lang='less'>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
</style>
